<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Echarts (https://github.com/apache/echarts)
* vue-echarts (https://github.com/ecomfe/vue-echarts)
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* moment (https://github.com/moment/moment)
* three.js (https://github.com/mrdoob/three.js)
* WWOBJLoader (https://github.com/kaisalmen/WWOBJLoader)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsTimeLineTracklayer_Vue"></title>
        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
        <script
            include="lodash,moment,three,OBJLoader2,echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                position: relative;
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .sm-left-part {
                position: absolute;
                width: 270px;
                height: 100%;
                z-index: 1000;
                background: rgba(0, 0, 0, 0.73);
            }
            .sm-chart-wrapper .sm-component-chart {
                display: flex;
            }
            .sm-component-time-slider {
                position: absolute;
                left: 270px;
                bottom: 0px;
                width: calc(100% - 270px);
                z-index: 1000;
            }
            .sm-component-web-map {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            .sm-gauge-wrapper {
                position: absolute;
                bottom: 0px;
                width: 100%;
                margin: 0 auto;
            }
            .sm-gauge-item {
                position: relative;
            }
            .sm-component-text {
                position: absolute;
                bottom: 0;
                width: 100%;
            }
            .sm-component-text span {
                margin: 0 auto;
            }
            .sm-chart-wrapper .sm-component-chart,
            .sm-chart-wrapper .sm-component-chart .sm-component-collapse-card__content {
                width: 270px;
                height: 160px;
            }
            .sm-gauge-wrapper .sm-component-chart,
            .sm-gauge-wrapper .sm-component-chart .sm-component-collapse-card__content {
                width: 130px;
                height: 100px;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
            <sm-web-map :map-options="mapOptions" :tianditu-key="tiandituKey">
                <sm-track-layer v-bind="trackLayers" :position="position"></sm-track-layer>
            </sm-web-map>
            <div class="sm-left-part">
                <div class="sm-chart-wrapper">
                    <sm-chart icon-class="" v-bind="chart" :dataset="dataset"></sm-chart>
                    <sm-chart icon-class="" v-bind="chart1" :dataset="dataset"></sm-chart>
                    <sm-chart icon-class="" v-bind="chart2" :dataset="dataset"></sm-chart>
                </div>
                <div class="sm-gauge-wrapper">
                    <div class="sm-gauge-item" style="width:100%">
                        <sm-chart
                            icon-class=""
                            v-bind="gauge"
                            :dataset="gaugeDataset"
                            style="margin: 0 auto"
                        ></sm-chart>
                        <sm-text title="速度"></sm-text>
                    </div>
                    <div class="sm-gauge-item" style="display: inline-block;width:49%">
                        <sm-chart icon-class="" v-bind="gauge1" :dataset="gaugeDataset"></sm-chart>
                        <sm-text title="加速度"></sm-text>
                    </div>
                    <div class="sm-gauge-item" style="display: inline-block;width:49%">
                        <sm-chart icon-class="" v-bind="gauge2" :dataset="gaugeDataset"></sm-chart>
                        <sm-text title="方位角"></sm-text>
                    </div>
                </div>
            </div>
            <sm-time-slider
                :data="data"
                :play-interval="2000"
                :theme-style="themeStyle"
                :checkpoint-style="checkpointStyle"
                :label="themeStyle"
                :line-style="lineStyle"
                @timeplayerchanged="timeplayerchanged"
                background="rgba(0, 0, 0, 0.73)"
            ></sm-time-slider>
        </div>

        <script>
            new Vue({
                el: '#main',
                data() {
                    var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
                    var attribution =
                        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
                    return {
                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
                        dataset: {
                            maxFeatures: '',
                            type: 'geoJSON',
                            geoJSON: {
                                type: 'FeatureCollection',
                                features: []
                            }
                        },
                        chart: {
                            datasetOptions: [
                                {
                                    seriesType: 'line',
                                    isStastic: false,
                                    isStack: false,
                                    xField: 'timestamp',
                                    yField: 'speed',
                                    sort: 'unsort'
                                }
                            ],
                            options: {
                                series: [
                                    {
                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 4,
                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
                                        lineStyle: { color: '#F2F5F8' }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    name: '速度',
                                    show: true,
                                    splitLine: {
                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
                                        show: true
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: false }
                                },
                                xAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: false,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
                                    show: true,
                                    name: '',
                                    axisTick: { alignWithLabel: true, show: false },
                                    splitLine: {
                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
                                legend: {
                                    data: ['speed'],
                                    show: false,
                                    textStyle: { color: '#fff', fontSize: 12 },
                                    type: 'scroll',
                                    top: 'top',
                                    left: 'center'
                                },
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'line' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
                                },
                                dataZoom: []
                            }
                        },
                        chart1: {
                            datasetOptions: [
                                {
                                    seriesType: 'line',
                                    isStastic: false,
                                    isStack: false,
                                    xField: 'timestamp',
                                    yField: 'acceleration',
                                    sort: 'unsort'
                                }
                            ],
                            options: {
                                series: [
                                    {
                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 4,
                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
                                        lineStyle: { color: '#F2F5F8' }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    name: '加速度',
                                    show: true,
                                    splitLine: {
                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
                                        show: true
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: false }
                                },
                                xAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: false,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
                                    show: true,
                                    name: '',
                                    axisTick: { alignWithLabel: true, show: false },
                                    splitLine: {
                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
                                legend: {
                                    data: ['acceleration'],
                                    show: false,
                                    textStyle: { color: '#fff', fontSize: 12 },
                                    type: 'scroll',
                                    top: 'top',
                                    left: 'center'
                                },
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'line' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
                                },
                                dataZoom: []
                            }
                        },
                        chart2: {
                            datasetOptions: [
                                {
                                    seriesType: 'line',
                                    isStastic: false,
                                    isStack: false,
                                    xField: 'timestamp',
                                    yField: 'wheel_angle',
                                    sort: 'unsort'
                                }
                            ],
                            options: {
                                series: [
                                    {
                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 4,
                                        itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
                                        lineStyle: { color: '#F2F5F8' }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    name: '方位角',
                                    show: true,
                                    splitLine: {
                                        lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
                                        show: true
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: false }
                                },
                                xAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: false,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: false },
                                    show: true,
                                    name: '',
                                    axisTick: { alignWithLabel: true, show: false },
                                    splitLine: {
                                        lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 35, left: 36, bottom: 35, right: 20 },
                                legend: {
                                    data: ['wheel_angle'],
                                    show: false,
                                    textStyle: { color: '#fff', fontSize: 12 },
                                    type: 'scroll',
                                    top: 'top',
                                    left: 'center'
                                },
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'line' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
                                },
                                dataZoom: []
                            }
                        },
                        gaugeDataset: { maxFeatures: 20, url: '', type: '', withCredentials: false },
                        gauge: {
                            datasetOptions: [{ seriesType: 'gauge' }],
                            options: {
                                series: [
                                    {
                                        name: 'inLoop',
                                        type: 'gauge',
                                        min: -15,
                                        max: 15,
                                        center: ['50%', '50%'],
                                        startAngle: 180,
                                        endAngle: 0,
                                        splitNumber: 10,
                                        radius: '70%',
                                        data: [{ value: 0, name: '完成率' }],
                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 16,
                                            color: '#fff'
                                        },
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.36, '#F2F5F8'],
                                                    [1, '#D3DDE8']
                                                ],
                                                width: 8
                                            }
                                        },
                                        pointer: { show: true, length: '66%', width: 2 },
                                        itemStyle: { show: false, color: 'auto' }
                                    },
                                    {
                                        name: 'outLoop',
                                        type: 'gauge',
                                        min: -15,
                                        max: 15,
                                        center: ['50%', '50%'],
                                        startAngle: 225,
                                        endAngle: -45,
                                        splitNumber: 10,
                                        radius: '75%',
                                        title: { show: false },
                                        detail: { show: false },
                                        axisTick: {
                                            show: false,
                                            length: -8,
                                            lineStyle: { width: 1, color: '#F2F5F8' },
                                            splitNumber: 7
                                        },
                                        splitLine: {
                                            show: false,
                                            length: -20,
                                            lineStyle: { width: 2, color: '#D3DDE8' }
                                        },
                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
                                        axisLine: { show: false },
                                        pointer: { show: false },
                                        itemStyle: { show: true, color: '' }
                                    }
                                ]
                            }
                        },
                        gauge1: {
                            datasetOptions: [{ seriesType: 'gauge' }],
                            options: {
                                series: [
                                    {
                                        name: 'inLoop',
                                        type: 'gauge',
                                        min: -0.6,
                                        max: 1.2,
                                        center: ['50%', '50%'],
                                        startAngle: 180,
                                        endAngle: 0,
                                        splitNumber: 10,
                                        radius: '70%',
                                        data: [{ value: 0, name: '完成率' }],
                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 16,
                                            color: '#fff'
                                        },
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.36, '#F2F5F8'],
                                                    [1, '#D3DDE8']
                                                ],
                                                width: 8
                                            }
                                        },
                                        pointer: { show: true, length: '66%', width: 2 },
                                        itemStyle: { show: false, color: 'auto' }
                                    },
                                    {
                                        name: 'outLoop',
                                        type: 'gauge',
                                        min: -0.6,
                                        max: 1.2,
                                        center: ['50%', '50%'],
                                        startAngle: 225,
                                        endAngle: -45,
                                        splitNumber: 10,
                                        radius: '75%',
                                        title: { show: false },
                                        detail: { show: false },
                                        axisTick: {
                                            show: false,
                                            length: -8,
                                            lineStyle: { width: 1, color: '#F2F5F8' },
                                            splitNumber: 7
                                        },
                                        splitLine: {
                                            show: false,
                                            length: -20,
                                            lineStyle: { width: 2, color: '#D3DDE8' }
                                        },
                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
                                        axisLine: { show: false },
                                        pointer: { show: false },
                                        itemStyle: { show: true, color: '' }
                                    }
                                ]
                            }
                        },
                        gauge2: {
                            datasetOptions: [{ seriesType: 'gauge' }],
                            options: {
                                series: [
                                    {
                                        name: 'inLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 7,
                                        center: ['50%', '50%'],
                                        startAngle: 180,
                                        endAngle: 0,
                                        splitNumber: 10,
                                        radius: '70%',
                                        data: [{ value: 0, name: '完成率' }],
                                        title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
                                        detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
                                        axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
                                        splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 16,
                                            color: '#fff'
                                        },
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.36, '#F2F5F8'],
                                                    [1, '#D3DDE8']
                                                ],
                                                width: 8
                                            }
                                        },
                                        pointer: { show: true, length: '66%', width: 2 },
                                        itemStyle: { show: false, color: 'auto' }
                                    },
                                    {
                                        name: 'outLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 7,
                                        center: ['50%', '50%'],
                                        startAngle: 225,
                                        endAngle: -45,
                                        splitNumber: 10,
                                        radius: '75%',
                                        title: { show: false },
                                        detail: { show: false },
                                        axisTick: {
                                            show: false,
                                            length: -8,
                                            lineStyle: { width: 1, color: '#F2F5F8' },
                                            splitNumber: 7
                                        },
                                        splitLine: {
                                            show: false,
                                            length: -20,
                                            lineStyle: { width: 2, color: '#D3DDE8' }
                                        },
                                        axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
                                        axisLine: { show: false },
                                        pointer: { show: false },
                                        itemStyle: { show: true, color: '' }
                                    }
                                ]
                            }
                        },
                        data: [],
                        checkpointStyle: { color: '#F2F5F8', background: '#F2F5F8' },
                        themeStyle: { color: '#F2F5F8', borderColor: '#F2F5F8' },
                        lineStyle: { background: '#515659', height: '5px', type: 'solid' },
                        mapOptions: {
                            pitch: 60,
                            container: 'map',
                            style: {
                                version: 8,
                                sources: {
                                    buildings: {
                                        type: 'geojson',
                                        data: 'https://iclient.supermap.io/examples/data/buildings.json'
                                    },
                                    baseLayer: {
                                        type: 'raster',
                                        tiles: [
                                            'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t1.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t2.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t3.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t4.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t5.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t6.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
                                            'https://t7.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
                                        ],
                                        tileSize: 256
                                    }
                                },
                                layers: [
                                    { id: 'baseLayer', type: 'raster', source: 'baseLayer' },
                                    {
                                        id: '3d-buildings',
                                        source: 'buildings',
                                        type: 'fill-extrusion',
                                        paint: {
                                            'fill-extrusion-color': '#484646',
                                            'fill-extrusion-height': ['*', ['get', 'height'], 5],
                                            'fill-extrusion-opacity': 1
                                        }
                                    }
                                ]
                            },
                            center: [116.4553, 39.9313],
                            zoom: 16.51,
                            maxZoom: 17,
                            bearing: 180,
                            rasterTileSize: 256
                        },
                        trackLayers: {
                            loaderType: 'OBJ2',
                            url: '../data/track-layer/car.obj',
                            obj2Url: '../data/track-layer/car.obj',
                            gltfUrl: '',
                            imgUrl: '',
                            displayLine: 'All',
                            layerStyle: {
                                line: {
                                    paint: { 'line-color': '#13FF13', 'line-width': 20, 'line-opacity': 0.8 }
                                }
                            },
                            direction: { front: 'x', bottom: '-z' },

                            unit: 'millimeter',
                            scale: 5,
                            followCamera: true,
                            trackPoints: []
                        },
                        position: {
                            prevTimestamp: null,
                            currentTimestamp: 1599810915000,
                            nextTimestamp: 1599810920000,
                            step: 3000
                        }
                    };
                },
                created() {
                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
                    this.requestData();
                },
                methods: {
                    requestData() {
                        var _this = this;
                        $.get('../data/track-layer/outTime.json', function(res) {
                            _this.timeData = res;
                            _this.setData(res);
                            _this.trackLayers.trackPoints = _this.getAllDataFeatures(res);
                            _this.timeplayerchanged({ currentTimestamp: 1599810915000, lastIndex: 0, nextIndex: 1 });
                        });
                    },
                    setData(data) {
                        var keys = [];
                        for (var key in data) {
                            keys.push(Number(key));
                        }
                        this.data = keys;
                    },
                    timeplayerchanged(val) {
                        var currentIndex = val.lastIndex;
                        var nextIndex = val.nextIndex;
                        var currentTimeStamp = val.currentTimeStamp;
                        if (currentIndex === -1) {
                            return;
                        }
                        var timestamp = this.data[currentIndex] + '';
                        var data = this.timeData[timestamp];

                        this.gauge.options.series[0].data[0].value = data.properties.speed;
                        this.gauge1.options.series[0].data[0].value = data.properties.acceleration;
                        this.gauge2.options.series[0].data[0].value = data.properties.wheel_angle;

                        var chartData = this.getDataByDates(this.timeData, Number(this.data[0]), Number(timestamp));
                        var chartFeatures = this.createChartFeatures(chartData, [
                            'speed',
                            'acceleration',
                            'wheel_angle'
                        ]);
                        this.dataset.geoJSON = {
                            type: 'FeatureCollection',
                            features: chartFeatures
                        };
                        this.position = {
                            prevTimestamp: Number(this.data[currentIndex] + '000'),
                            currentTimestamp: Number(currentTimeStamp),
                            nextTimestamp: Number(this.data[nextIndex] + '000'),
                            step: 3000
                        };
                    },
                    getAllDataFeatures(data) {
                        var features = [];
                        for (var key in data) {
                            data[key].properties.timestamp = Number(key + '000');
                            features.push(data[key]);
                        }
                        return features;
                    },
                    createChartFeatures(data, yFields) {
                        var results = [];
                        for (var timestamp in data) {
                            var result = {};
                            result['timestamp'] = this.timestamp2Date(timestamp);
                            var datas = data[timestamp];
                            yFields.forEach(yField => {
                                result[yField] = datas.properties[yField];
                            });

                            results.push(result);
                        }
                        results = results.map(val => {
                            var feature = {};
                            feature.properties = val;
                            return feature;
                        });
                        return results;
                    },
                    getDataByDates(data, start, end) {
                        var newdata = {};
                        if (data && start && end) {
                            if (start === end) {
                                var timestamp = this.getNearestDataIndex(this.data, start);
                                newdata[start] = data[timestamp + ''];
                            }
                            for (var timestamp in data) {
                                if (timestamp >= start && timestamp <= end) {
                                    newdata[timestamp] = data[timestamp + ''];
                                }
                            }
                        }
                        return newdata;
                    },
                    getNearestDataIndex(data, timestamp) {
                        var keys = data;
                        var index = _.findLastIndex(keys, function(val) {
                            return val <= timestamp;
                        });
                        return keys[index];
                    },
                    timestamp2Date(timestamp) {
                        return timestamp ? moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
                    }
                }
            });
        </script>
    </body>
</html>
